// src/components/AmbiguousExample.js

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  // 唯一匹配组件.
  Switch,
} from 'react-router-dom';

// 模糊匹配例子.
const AmbiguousExample = () => (
  <div>
    <ul>
      <li><Link to="/about">About Us (static)</Link></li>
      <li><Link to="/company">Company (static)</Link></li>
      <li><Link to="/kim">Kim (dynamic)</Link></li>
      <li><Link to="/chris">Chris (dynamic)</Link></li>
    </ul>

    {/*
      Sometimes you want to have a whitelist of static paths like "/about" and "/company" but also allow for dynamic patterns like "/:user".
      有时你想要静态路由的白名单，但也允许动态模式。

      The problem is that "/about" is ambiguous and will match both "/about" and "/:user".
      问题是 "/about" 是不明确的，并将匹配 "/about" 和 "/:user" 。

      Most routers have an algorithm to decide for you what it will match since they only allow you to match one "route".
      大多数路由器都有一个算法来决定它将匹配什么，因为它们只允许你匹配一个 "route"。

      React Router lets you match in multiple places on purpose (sidebars, breadcrumbs, etc).
      React Router 允许您在多个地方进行匹配（侧边栏，面包屑等）。

      So, when you want to clear up any ambiguous matching, and not match "/about" to "/:user", just wrap your <Route>s in a <Switch>.
      所以，当你想清除任何不明确的匹配，并且不匹配 "/about" 到 "/:user" 时，只需将 <Route> 包装在 <Switch> 中。

      It will render the first one that matches.
      他会使第一个匹配。
    */}
    <Switch>
      <Route path="/about" component={About}/>
      <Route path="/company" component={Company}/>
      <Route path="/:user" component={User}/>
    </Switch>
  </div>
);

const About = () => <h2>About</h2>;
const Company = () => <h2>Company</h2>;
const User = ({ match }) => (
  <div>
    <h2>User: {match.params.user}</h2>
  </div>
);

export default AmbiguousExample;
